import React from 'react';
import { Form, Input, Button, Card, Typography, App } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import store from "./store";

const { Title, Text } = Typography;

const Register = () => {
  const { loading, updates, register } = store();
  const { message } = App.useApp();
  const navigate = useNavigate();

  // 处理注册
  const handleRegister = async (values) => {
    // 更新loading状态
    updates({
      loading: { register: true }
    });
    
    const param = {
      username: values.username,
      password: values.password,
      email: values.email,
      password_confirm: values.password_confirm
    };
    
    const result = await register(param);
    
    if (result.success) {
      message.success('注册成功，正在跳转...');
      // 跳转到首页
      setTimeout(() => {
        navigate('/');
      }, 1500);
    } else {
      message.error(result.message);
    }
  };

  return (
    <div className="flex min-h-screen justify-center items-center bg-gray-50">
      <div className="w-full max-w-md p-4">
        <Card className="w-full shadow-md">
          <div className="text-center mb-6">
            <Title level={2} className="mb-1">创建账号</Title>
            <Text type="secondary">请填写以下信息完成注册</Text>
          </div>

          <Form
            name="register_form"
            initialValues={{ agreement: false }}
            onFinish={handleRegister}
            size="large"
            layout="vertical"
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: '请输入用户名' },
                { min: 3, message: '用户名至少3个字符' }
              ]}
            >
              <Input
                prefix={<UserOutlined className="text-gray-400" />}
                placeholder="用户名"
                disabled={loading.register}
              />
            </Form.Item>

            <Form.Item
              name="email"
              rules={[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '请输入有效的邮箱地址' }
              ]}
            >
              <Input
                prefix={<MailOutlined className="text-gray-400" />}
                placeholder="邮箱"
                disabled={loading.register}
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                { required: true, message: '请输入密码' },
                { min: 6, message: '密码至少6个字符' }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className="text-gray-400" />}
                placeholder="密码"
                disabled={loading.register}
              />
            </Form.Item>

            <Form.Item
              name="password_confirm"
              dependencies={['password']}
              rules={[
                { required: true, message: '请确认密码' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入的密码不一致'));
                  },
                }),
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className="text-gray-400" />}
                placeholder="确认密码"
                disabled={loading.register}
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="w-full"
                loading={loading.register}
              >
                注册
              </Button>
            </Form.Item>

            <div className="text-center">
              <Text type="secondary">
                已有账号？ <Link to="/login" className="text-blue-500 hover:text-blue-600">立即登录</Link>
              </Text>
            </div>
          </Form>
        </Card>
      </div>
    </div>
  );
};

// 使用App组件包装Register组件
const RegisterWithApp = () => (
  <App>
    <Register />
  </App>
);

export default RegisterWithApp;